<template>
  <view class="page-default">
    <c-nav-bar title="信息查询" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="mx-3 mt-6 flex items-center justify-center rounded-lt-4 rounded-rt-4 bg-#00E0AE py-2 text-center text-white">
      <up-icon name="account-fill" size="20" color="#FFFFFF" />
      <text>学生基本信息</text>
    </view>
    <view class="mx-3 flex items-start justify-center bg-white">
      <image src="/static/images/ellipse.png" class="h-2 w-28" />
    </view>
    <view class="mx-3 rounded-lb-4 rounded-rb-4 bg-white py-8 text-center">
      <view class="mb-4 flex items-center justify-center">
        <u-image class="avatar border border-4" radius="8" src="/static/images/clubs.png" height="160" width="140" mode="aspectFill" />
      </view>
      <view class="text-center">
        <view class="m-b-2 text-xl text-#265A63 font-bold">
          谢之遥
        </view>
        <view class="text-#3AA69B">
          2025级新生
        </view>
      </view>

      <view class="mt-4 flex items-center justify-center" @click="modalHandle()">
        <view class="text-left space-y-2">
          <view class="">
            <text class="text-#6E7B8B">
              专业：
            </text><text> 旅游服务与管理</text>
          </view>
          <view class="">
            <text class="text-#6E7B8B">
              教室：
            </text><text> 2-24</text>
          </view>
          <view class="">
            <text class="text-#6E7B8B">
              班级：
            </text><text> 2025级旅游1班</text>
          </view>
          <view class="">
            <text class="text-#6E7B8B">
              宿舍：
            </text><text> 女生公寓4-10</text>
          </view>
        </view>
      </view>
    </view>

    <view class="content m-3 mt-4 rounded-4 bg-white px-4 line-height-6">
      <view class="w-full flex items-center justify-between" @click="popupHandle()">
        <image src="/static/images/icon/qcode.png" class="h-18 w-18" />
        <view class="flex-1">
          <view class="flex items-center">
            <text class="text-#1A2B5C font-bold">
              扫码报到
            </text>
          </view>
          <view class="text-xs text-#6E7B8B">
            一键扫码报到
          </view>
        </view>
        <view class="inline-flex items-center justify-center rounded-4 bg-#C5C9D1 px-2px py-2px">
          <u-icon name="arrow-right" size="10" color="#fff" />
        </view>
      </view>
      <view class="px-2">
        <u-line dashed />
      </view>
      <view class="w-full flex items-center justify-between" @click="navigateTo()">
        <image src="/static/images/icon/report.png" class="h-18 w-18" />
        <view class="flex-1">
          <view class="flex items-center">
            <text class="text-#1A2B5C font-bold">
              报到详情
            </text>
          </view>
          <view class="text-xs text-#6E7B8B">
            点击查看个人报到信息
          </view>
        </view>
        <view class="inline-flex items-center justify-center rounded-4 bg-#C5C9D1 px-2px py-2px">
          <u-icon name="arrow-right" size="10" color="#fff" />
        </view>
      </view>
    </view>
    <!-- 温馨提示 -->
    <ErrorModal ref="errorModal" />
    <!-- 报到成功 -->
    <SuccessPopup ref="successPopup" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import ErrorModal from './error-modal.vue';
import SuccessPopup from './success-popup.vue';

// 用户服务协议与隐私政策
const errorModal = ref();
const modalHandle = () => {
  errorModal.value.init();
};
const successPopup = ref();
const popupHandle = () => {
  successPopup.value.init();
};
const navigateTo = () => {
  uni.redirectTo({
    url: '/pages/biz/report/detail',
  });
};
</script>

<style lang="scss" scoped>
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}

:deep(.u-line){
 border-bottom: 2px dashed #e0e7ec !important;
}
:deep(.u-cell__title-text){
  color: #6E7B8B;
}
:deep(.u-cell__value){
  color: #000000;
}
.avatar{
  box-shadow: 1px 1px 5px #E0E7EC;
  border-radius: 20px;
}
</style>
